/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text, InputLine, TextArea, Input, BlobInputList, InputDatalist, InputIdProvider,
} from "customize-easy-ui-component";
import {
    InspectRecordLayout, InternalItemProps,  useItemInputControl,
} from "../common/base";
import {useMeasureInpFilter} from "../common/hooks";
import { objNestSet} from "../../common/tool";
import {Dispatch, SetStateAction} from "react";

interface Props extends InternalItemProps {
    label?: string;
    titles?: any[];
}

//常见模型：承压类的宏观检查 {特别的配置 } ，后的第三个字段标识：是否标题也是手工录入的？
export const item宏观检验o = [['封头型', {t: '封头型式（端盖）', pr: '结构检验', span: 6},],
    ['筒体连', {t: '封头与筒体的连接',},],
    ['开孔位', {t: '开孔位置及补强',},],
    ['焊缝布', {t: '纵（环）焊缝的布置及型式',},],
    ['支承型', {t: '支承或者支座的型式与布置',},],
    ['排放装', {t: '排放（疏水、排污）装置的设置',},],
    ['内径差', {t: '筒体同一断面上最大内径与最小内径差', pr: '几何尺寸检验', span: 5,u:'mm'}],
    ['错边量', {t: '纵（环）焊缝最大对口错边量',}],
    ['棱角度', {t: '纵（环）焊缝最大棱角度',}],
    ['大咬边', {t: '纵（环）焊缝最大咬边',}],
    ['大余高', {t: '纵（环）焊缝最大余高' }],
    //单位,u:null重置单位；    若是遇到拆分的考虑重新配置，u参数针对同一个编辑器区域的。
    ['铭牌', {t: '铭牌和标志', pr: '壳体外观检验', span: 9 ,u:null}],
    ['表腐蚀', {t: '内外表面的腐蚀'}],
    ['泄漏', {t: '腐蚀、泄漏、变形、机械接触损伤'}],
    ['卡焊迹', {t: '工卡具焊迹、电弧灼伤'}],
    //span==0表示td不拆分 但是前缀pr也可针对不同编辑器区域的，再做冗余设置
    ['固螺栓', {t: '法兰、密封面及其紧固螺栓', pr: '壳体外观检验', span: 0}],
    ['支座', {t: '支承、支座'}],
    ['铅垂度', {t: '直立容器和球形容器支柱的铅垂度'}],
    ['膨胀孔', {t: '多支座卧式容器的支座膨胀孔'}],
    ['信号孔', {t: '排放（疏水、排污）装置和泄漏信号孔的堵塞、腐蚀、沉积物'}],
    ['隔热层', {t: '隔热层破损、脱落、潮湿及层下腐蚀、螺纹', pr: '隔热层、衬里检验', span: 3}],
    ['衬里层', {t: '衬里层的破损、腐蚀、螺纹、脱落'}],
    ['堆焊层', {t: '堆焊层的龟裂、剥离和脱落'}],
    ['真空度', {t: '夹层真空度', pr: '其他检验', span: 3}],
    ['日蒸率', {t: '日蒸发率'}],
    ['宏其他', { }, true]
];

export const itemA宏观检验: string[] = ['宏观结果'];
item宏观检验o.forEach(([name, title, initIsp], i: number) => {
    itemA宏观检验.push(name as string);
});
const 检验结果选=['√','——','×'];
export const 检验内容选=['可见部位检查','1.5/1.0','内容检查','——'];
/**宏观检验报告-结构几何尺寸 : 拆成两半 1-15条 idx<15的；
 * */
export const Structural =
React.forwardRef((
    {children, show, alone = true, redId, nestMd, label, titles}: Props, ref
) => {
    const [getInpFilter] = useMeasureInpFilter(null, itemA宏观检验,);
    const {inp, setInp} = useItemInputControl({ref});
    return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                            nestMd={nestMd} alone={alone} label={label!}>
             <Text>{label}：</Text>
             <Macroscopic inp={inp} setInp={setInp} from={0} to={15}/>
    </InspectRecordLayout>;
});
/**宏观检验报告 后一半的编辑器-壳体外观 : 剩下的idx>=15的；
 * */
export const ShellAppearance =
React.forwardRef((
    {children, show, alone = true, redId, nestMd, label, titles}: Props, ref
) => {
    //共用的 “itemA宏观检验” 两个编辑器都会提取字段的。
    const [getInpFilter] = useMeasureInpFilter(null, itemA宏观检验,);
    const {inp, setInp} = useItemInputControl({ref});
    let oldPrefic='';
    let oldunit='';
    return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                                nestMd={nestMd} alone={alone} label={label!}>
        <Text>{label}：</Text>
        <Macroscopic inp={inp} setInp={setInp} from={15}  to={item宏观检验o.length}/>
        <Text variant="h4">检查结果：</Text>
        <TextArea  value={inp?.宏观结果 ||''} rows={8}
                   onChange={e => setInp({ ...inp, 宏观结果: e.currentTarget.value||undefined}) } />
    </InspectRecordLayout>;
});
interface MacroscopicProps extends InternalItemProps {
    inp: any,
    setInp: Dispatch<SetStateAction<any>>,
    /**起点的所索引号 0开*/
    from: number;
    /**不包含这最后一个的*/
    to: number;
}
/**还是抽取出 可公用的代码为好。
 * */
const Macroscopic= ({inp, setInp,from,to} : MacroscopicProps
) => {
    let oldPrefic='';
    let oldunit='';
    return <>
        { item宏观检验o.map(([name,conf,adddesc]: any, i:number) => {
            if(i<from || i>=to)  return null;
            const {t: title, pr: prefix, span,u:unit}=conf;
            oldPrefic=prefix? prefix:oldPrefic;             //配置可继承性
            oldunit=unit===null? '' : unit? unit:oldunit;
            return (<React.Fragment key={i}>
                <div css={{display: 'flex',flexWrap:'wrap',alignItems:'center'}}>
                    <Text>项目{i+1} - {oldPrefic} {'>'} {title}：</Text>
                    {adddesc && <InputLine  label={'第26项的其它项目之可增加的检验项目的标题'}>
                        <Input value={inp?.[name]?.a || ''}  size={2} style={{display: 'inline-flex', width: 'unset'}}
                               onChange={e => objNestSet(name,'a', e.currentTarget.value||undefined,inp,setInp) }/>
                    </InputLine>
                    }
                    检查内容
                    <InputDatalist value={(inp?.[name]?.c) || ''} datalist={检验内容选}
                                   style={{display: 'inline-flex', width: '11rem'}}
                                   onListChange={v => objNestSet(name,'c', v||undefined,inp,setInp) } />
                    {oldunit}
                    &nbsp;检查结果
                    <InputIdProvider>
                        <InputDatalist value={(inp?.[name]?.r) || ''} datalist={检验结果选}
                                       style={{display: 'inline-flex', width: '5rem'}}
                                       onListChange={v => objNestSet(name,'r', v||undefined,inp,setInp) } />
                    </InputIdProvider>
                    &nbsp;备注
                    <BlobInputList  value={inp?.[name]?.m ||''} datalist={['见结果栏']}
                                    style={{display: 'inline-flex', width: '9rem'}}  rows={1}
                                    onListChange={v => objNestSet(name,'m', v||undefined,inp,setInp) } />
                </div>
            </React.Fragment>);
        })}
        <hr/>
        注：检验结果栏中，打“√”的表示无问题或者合格的检验项目，打“×”的表示有问题或者不合格的检验项目，填写“/”的表示实际没有的检验项目，“－”的表示无法检验的项目。
    </>;
};
